<template>
  <div class="navi_top navi_layout">
    <div class="navi_top navi_top_logo">
      <Logo></Logo>
    </div>
    <div class="navi_top navi_top_login_link">
      <LoginLink v-if="user.id===0"></LoginLink>
      <UserInfo v-if="user.id!==0" :user="user"></UserInfo>
    </div>
  </div>
</template>

<script>

import Logo from "@/components/common/Logo";
import LoginLink from "@/components/login/LoginLink";
import {UserMe} from "@/user";
import UserInfo from "@/components/common/UserInfo";

export default {
  name: "Navigation",
  data() {
    return {
      user: UserMe
    }
  },
  components: {UserInfo, LoginLink, Logo}
}
</script>

<style scoped>
.navi_top {
  display: flex;
  justify-content: space-evenly; /* 平分空间 */
  align-items: center; /* 元素居中对齐 */
  background-color: white;
  height: 10vh;
  width: 100vw;
}

.navi_layout {
  border-bottom: 1px solid;
}

.navi_top_logo {
  width: 2vw;
  height: 2vw;
  flex: 1;
}

.navi_top_login_link {
  width: 5vw;
  height: 2vw;
  flex: 1;

}

</style>